<template>
    <div id="app">
        <div class="content">
            <div class="c-left" style="max-height: 880px;overflow-y: auto;">
                <div class="list-tit">{{ categoryInfo.title }}</div>
                <ul>
                    <li class="movehover" v-for="item in categoryChildren" @click="getContents(item.id)">
                        {{ item.title }}</li>
                </ul>
            </div>
            <div class="c-right">
                <div class="weizhi">
                    您当前位置：<span @click="toIndex" style="cursor:pointer;">首页</span><span v-for="item in parentNames" @click="navigateToList(item.id)" style="cursor:pointer;"> ｜ {{item.name}}</span>
                </div>
                <ul>
                    <li class="movehover" v-for="item in contents" @click="toContent(item.id, item.type)">
                        <span class="datetime">{{ moment(item.createTime).format('YYYY-MM-DD')}}</span>{{ item.title | ellipsis }}</li>
                </ul>
                <page :pagesize="queryParams.pageSize" :page="queryParams.pageNum" :total="totalNum"
                      @func="pageChange"></page>
            </div>

        </div>

    </div>
</template>

<script type="text/javascript">
import '../../static/css/css.css';
import request from "@/utils/request";
import page from './page'
import moment from "moment";
export default {
    name: '',
    components: {
        page
    },
    filters: {
        ellipsis(value, num) {
            if (!value) return ''
            if (num == NaN || num == undefined) num = 32
            if (value.length > num) {
                return value.slice(0, num) + '...'
            }
            return value
        }
    },
    data() {
        return {
            categoryId: '',
            categoryInfo: {},
            categoryChildren: [],
            contents: [],
            queryParams: {
                pageNum: 1,
                pageSize: 20
            },
            totalNum: 0,
            parentNames: []
        }
    },
    watch: {
        $route: {
            handler() {
                this.categoryId = this.$route.query.categoryId;
                if (this.categoryId != undefined) {
                    this.getCategoryChildren()
                    this.getContents(this.categoryId)
                }
            },
            deep: true
        }
    },
    created() {
        this.categoryId = this.$route.query.categoryId;
        if (this.categoryId != undefined) {
            this.getCategoryChildren()
            this.getContents(this.categoryId)
        }
    },
    methods: {
        moment,
        toIndex() {
            this.$router.push({
                path: '/'
            })
        },
        pageChange(info) {
            this.queryParams.pageNum = info.page
            this.getContents(this.categoryId)
        },
        getCategoryChildren() {
            request({
                url: '/business/getChildrenCategories/' + this.categoryId,
                method: 'get'
            }).then((res) => {
                this.categoryInfo = res.data.data
                this.categoryChildren = res.data.data.children
            })
        },
        getContents(id) {
            this.categoryId = id
            request({
                url: '/business/getContentsByCategoryId/' + id,
                method: 'get',
                params: this.queryParams
            }).then((res) => {
                this.contents = res.data.rows
                this.totalNum = res.data.total
                this.getParentNames(id)
            })
        },
        toContent(id, type) {
            if (type == 1 || type == 4 || type == 5) {
                let newR = this.$router.resolve({
                    path: '/content', query: {
                        contentId: id
                    }
                })
                window.open(newR.href,'_blank')
            } else if (type == 2) {
                let newR = this.$router.resolve({
                    path: '/pdf', query: {
                        contentId: id
                    }
                })
                window.open(newR.href,'_blank')
            } else if (type == 3) {
                let newR = this.$router.resolve({
                    path: '/video_content', query: {
                        contentId: id
                    }
                })
                window.open(newR.href,'_blank')
            }
        },
        getParentNames(categoryId){
            request({
                url: '/business/parentNames/' + categoryId,
                method: 'get'
            }).then((res) => {
                this.parentNames = res.data.data.reverse()
            })
        },
        navigateToList(id) {
            let newR = this.$router.resolve({
                path: '/list', query: {
                    categoryId: id
                }
            })
            window.open(newR.href,'_blank')
        },
    }
}

</script>

<style scoped>
::-webkit-scrollbar{
    width: 5px;
    height: 5px;
}
  ::-webkit-scrollbar-thumb{
      border-radius: 1em;
      background-color: rgba(50,50,50,.3);
  }
  ::-webkit-scrollbar-track{
      border-radius: 1em;
      background-color: rgba(50,50,50,.1);
  }

/*列表页面*/
.c-left {
    width: 260px;
    display: inline-block;
    padding: 20px;
    text-align: center;
    float: left;
}

.list-tit {
    font-weight: bold;
    color: white;
    background-color: #f50000;
    height: 38px;
    line-height: 38px;
}

.c-left ul {
    border: 1px #CCCCCC solid;
}

.c-left ul li {
    line-height: 45px;
    border-bottom: 1px #CCCCCC dashed;
}

.c-left ul li:last-child {
    border: none;
}

.c-right {
    margin-left: 20px;
    width: 860px;
    float: left;
    margin-right: 20px;
    min-height: 600px;
}

.weizhi {
    padding-top: 20px;
    font-size: 14px;
    line-height: 38px;
    border-bottom: 1px #CCCCCC dashed;
    padding-bottom: 10px;
    margin-bottom: 10px;
}

.c-right ul {
    list-style: disc;
    padding-left: 20px;
}

.c-right ul li {
    line-height: 38px;
}

.c-right ul li a {
    color: #333333;
}

.c-right ul li span {
    float: right;
}
</style>
